<template>
  <div>
    <h2>Hello</h2>
    <!-- 1. 直接通过 $store.getters.xxx -->
    <p>1. {{ $store.getters.doneTodos }}</p>
    <!-- 2. 使用 计算属性 -->
    <p>2. {{ doneTodos }}</p>
    <!-- 3. 使用 计算属性 + mapGetters 辅助函数 -->
    <p>3. {{ undoneTodos }}</p>

    <p>a: {{ a }}</p>

    <p>{{ getProductById(3) }}</p>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  created() {
    console.log(this.$store);
  },

  computed: {
    // this.undoneTodos => store.getters.undoneTodos
    ...mapGetters(["undoneTodos", "getProductById"]),
    ...mapGetters({
      // this.a => store.getters.undoneTodos
      a: "undoneTodos",
    }),
    doneTodos() {
      return this.$store.getters.doneTodos;
    },
  },
};
</script>
